<template>
  <div>
    <h1>旅馆列表</h1>
    <el-table stripe :data="hotelList">
      <el-table-column type="expand">
        <template #default="scope">
          <el-descriptions border>
            <el-descriptions-item label="旅馆描述信息">{{scope.row.hotelDescription}}</el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column width="150" label="旅馆名称" prop="hotelName"></el-table-column>
      <el-table-column width="160" label="发布时间" prop="publishTime"></el-table-column>
      <el-table-column label="旅馆描述信息">
        <template #default="scope">{{scope.row.hotelDescription.substring(0,15)}}...</template>
      </el-table-column>
      <el-table-column width="150" label="操作">
        <template #default="scope">
          <router-link class="RLink" :to="`/circum/editHotel/${scope.row.hotelId}`">
            <el-button type="primary" size="small">编辑</el-button>
          </router-link>
          &nbsp;
          <el-popconfirm
              confirmButtonText="确定"
              cancelButtonText="取消"
              title="确定删除吗？"
              @confirm="deleteHotelOne(scope.row.hotelId)"
          >
            <template #reference>
              <el-button type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>
  </div>

</template>

<script>
import {deleteHotel, getHotelList} from "@/api/multimedia";

export default {
  name: "hotelList",
  data(){
    return{
      hotelList:[],
    }
  },
  created() {
    this.getHotel()
  },
  methods:{
    getHotel(){
      getHotelList().then(res=>{
        this.hotelList=res.data.hotelList
      })
    },
    deleteHotelOne(id){
       deleteHotel(id).then(()=>{
         this.getHotel()
       })
    },
  }
}
</script>

<style lang="less" scoped>
.RLink{
  text-decoration: none;
  color: #000000;
&:hover{
   color: #666;
 }
}
</style>
